<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    {% load static %}
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-注册</title>
	<link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
	<script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
	<script type="text/javascript" src="{% static 'js/register.js' %}"></script>
</head>

<script>
    $(function(){
    //短信验证码
    //1. 找标签:btn1
    //2. 定时器完成: 显示时间变化!!!
    //setInterval(函数, 时间)
    var btn1 = $('#sendsms');
    var count=5; // 倒计时数量 一般为60秒!
    var timer =null; //定时器
    //事件
    btn1.click(function(){
    phone = $('#phone').val(); //val:值
    if(phone==''){
    alert('请输入电话号码');
    return false;
    }
    //ajax
    $.ajax({
    type: "get",
    url: "/df_user/sms_send/",
    data:"phone="+phone,

    success: function(msg){
    console.log( "Data Saved: " + msg );
    //转换为json
    obj = eval("("+msg+")");
    console.log('结果:'+obj.Message);
    if(obj.Message=='OK'){
    $('#msg').html('短信发送成功')
    }else{
    $('#msg').html('短信发送失败')
    }
    },
    error:function(res){
    //状态码
    console.log(res.status)
    }
    });
    //end --发送ajax
    //特效 start
    //禁用
    $(this).attr("disabled",'true');
    var _this= $(this);
    //定时器实现时间每次减少1
    timer = setInterval(function(){
    count--;
    console.log("剩余时间:"+count);
    if(count>=0){
    //this表示对象!!!! 表示定时器!!!!
    //this.innerHTML="时间剩余"+ count+"秒";
    _this.html(count+"秒s后重发")
    }else {
        _this.disabled = false;
        clearInterval(timer);
        _this.html("重新发送");
        count = 5;
        $('#sendsms').removeAttr("disabled")
    }
    },1000);
    });
    //特效 end
    //短信验证
        //change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。
    $("#smscode").change(function(){
    //验证ajax
    var phone = $('#phone').val();
    var code = $(this).val();
    $.ajax({
    type: "get",
    url: "/df_user/sms_check/",
    data:"phone="+phone+" code="+code,
    success: function(msg){
    console.log( "Data Saved: " + msg );
    //已经为json
    if(msg.code=='200'){
    $('#msg').html('验证码正确')
    }else{
    $('#msg').html('手机验证码输入错误')
    }
    },
    error:function(res){
    //状态码
    console.log(res.status);
    alert('连接服务器失败')
    }
    });
    //end验证ajax
    })
    //短信验证end
    })
</script>

<body>
	<div class="register_con">
		<div class="l_con fl">
			<a class="reg_logo"><img src="{% static 'images/logo02.png' %}"></a>
			<div class="reg_slogan">足不出户  ·  新鲜每一天</div>
			<div class="reg_banner"></div>
		</div>
		<div class="r_con fr">
			<div class="reg_title clearfix">
				<h1>用户注册</h1>
				<a href="{% url 'df_user:login' %}">登录</a>
			</div>
			<div class="reg_form clearfix">
				<form method="post" action="{% url 'df_user:register' %}">
{#                   测试数据不合法的情况下，提示错误信息#}
                    <span style="color: red">{{ error_msg }}</span>
                    {% csrf_token %}
				<ul>
					<li>
						<label>用户名:</label>
						<input type="text" name="user_name" id="user_name">
						<span class="error_tip">提示信息</span>
					</li>					
					<li>
						<label>密码:</label>
						<input type="password" name="pwd" id="pwd">
						<span class="error_tip">提示信息</span>
					</li>
					<li>
						<label>确认密码:</label>
						<input type="password" name="cpwd" id="cpwd">
						<span class="error_tip">提示信息</span>
					</li>
					<li>
						<label>邮箱:</label>
						<input type="text" name="email" id="email">
						<span class="error_tip">提示信息</span>
					</li>
                    <li>
						<label>电话:</label>
						<input type="text" name="phone" id="phone" class="form-control" placeholder="电话" required>
						<span class="error_tip">提示信息</span>
					</li>
                    <li>
                        <input type="button" name="sendsms"  id='sendsms' value="发送" class="btn btn-lg btn-primary btn-block" style="width: 100px;float:right;" >
                        <input type="text" name="code" id="smscode" placeholder="验证码" style="width: 150px;height: 40px" class="form-control">
                        <br>
                    </li>
                            <span id="msg"></span>
					<li class="agreement">
						<input type="checkbox" name="allow" id="allow" checked="checked">
						<label>同意”天天生鲜用户使用协议“</label>
						<span class="error_tip2">提示信息</span>
					</li>
					<li class="reg_sub">
						<input type="submit" value="注 册" name="">
					</li>
				</ul>				
				</form>
			</div>

		</div>

	</div>

	<div class="footer no-mp">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
	
</body>
</html>